<template>
  <div class="container" >
        <div class="accident-report">
            <div class="content">
                <div class="cell-list">
                    <wux-cell thumb="../../image/user.png" is-link url="/pages/claim/userList" title="出险人" :extra='empName'></wux-cell>
                </div>
                <div class="cell-list">
                    <picker mode="date" v-model="accidentTime" @change="bindTimeChange">
                        <view class="picker">
                            <wux-cell thumb="../../image/notebook.png" is-link title="事故时间" :extra="accidentTime" ></wux-cell>
                        </view>
                    </picker>
                </div>

                <div class="i-cell i-input cell-list">
                    <img class='thumb' :src="phoneUrl" alt="">
                    <div class="i-input-title">手机号</div>
                    <input class='i-input-input' type="number" v-model="PhoneNo" placeholder="请输入手机号">
                </div>

                <div class="cell-list">
                    <wux-cell thumb="../../image/map-pin.png" title="事故地址" ></wux-cell>
                    <picker mode="region" @change="bindRegionChange" v-model="region">
                        <view class="picker">
                            <wux-cell thumb="../../image/map-pin.png" is-link title="选择地址" :extra="currentRegion" ></wux-cell>
                        </view>
                    </picker>
                    <textarea class="textarea" v-model='adressDetail' placeholder="请输入详细事故地址" />
                </div>
                <div class="cell-list">
                    <wux-cell thumb="../../image/burger-1.png" title="事件描述" ></wux-cell>
                    <textarea class="textarea" v-model='caseContent' placeholder="请输入事故信息描述" />
                </div>
            </div>
            <buttomBtn title="提交" @handleClick='handleClick'></buttomBtn>
        </div>
  </div>
</template>

<script>
import buttomBtn from '@/components/Bbutton'
import { reportCase } from 'api/api'
import { setStorage, getStorage } from 'common/utils/wechat'
import phoneUrl from 'static/image/phone.png'
export default {
    data () {
        return {
            accidentTime: '2018-01-01',
            region: [],
            adressDetail: '',
            caseContent: '',
            empName: '',
            empId: '',
            PhoneNo: '',
            phoneUrl
        }
    },

    components: {
        buttomBtn
    },

    methods: {
        resetDate () {
            this.accidentTime = '2018-01-01'
            this.region = []
            this.adressDetail = ''
            this.caseContent = ''
            this.empName = ''
            this.empId = ''
            this.PhoneNo = ''
        },
        bindRegionChange (e) {
            console.log(e.mp.detail.value)
            this.region = e.mp.detail.value
        },
        bindTimeChange (e) {
            console.log(e)
            this.accidentTime = e.mp.detail.value
        },
        handleClick () {
            if (!this.empId) {
                wx.showToast({
                    title: '请选择出险人',
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            let info = {
                'address': this.region.join('') + this.adressDetail,
                'empId': this.empId,
                'caseDate': this.accidentTime,
                'caseContent': this.caseContent,
                'PhoneNo': this.PhoneNo
            }
            reportCase(info)
                .then(res => {
                    wx.showToast({
                        title: res.message,
                        icon: 'success',
                        duration: 2000
                    })
                    this.resetDate()
                    setStorage('chuxianren', '')
                })
        }
    },
    computed: {
        currentRegion: function () {
            return this.region.join('-')
        }
    },
    mounted () {
        console.log(this.$root.$mp)
    },
    onShow () {
        console.log(getStorage('chuxianren'))
        getStorage('chuxianren').then((res) => {
            this.empName = res.data.F_EmpName
            this.empId = res.data.F_Id
            this.PhoneNo = res.data.F_Telphone || ''
        })
    }
}
</script>

<style lang='stylus' scoped>
.accident-report
    width 750rpx
    min-height 100vh
    display flex
    justify-content space-between
    flex-direction column
    .content
        width 100%
    .cell-list
        margin-top 15rpx
    .textarea
        padding 20rpx 0 0 100rpx
        height: 70px
        width 100%
        background #fff
        display block
    .thumb
        display:block
        width:34rpx
        height:38rpx
        margin-right:10rpx
</style>
